import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/home/HomeIndex.vue"),
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "/home/movies",
        component: () => import("../views/home/movies/MoviesIndex.vue"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "hot",
            component: () => import("../views/home/movies/hot/HomeList.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "cinema",
            component: () =>
              import("../views/home/movies/cinema/CinemaIndex.vue"),
          },
          {
            path: "wait",
            component: () => import("../views/home/movies/wait/WaitIndex.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "classic",
            component: () =>
              import("../views/home/movies/classic/ClassicIndex.vue"),
            meta: {
              requireAlive: true,
            },
          },
        ],
      },
      {
        path: "/home/video",
        component: () => import("../views/home/video/VideoIndex.vue"),
        meta: {
          title: "猫眼-视频",
        },
      },
      {
        path: "/home/mini",
        component: () => import("../views/home/mini/MiniIndex.vue"),
        meta: {
          title: "猫眼-小视频",
        },
      },
      {
        path: "/home/show",
        component: () => import("../views/home/show/ShowIndex.vue"),
        meta: {
          requireLogin: true,
          title: "猫眼-演出",
        },
      },
      {
        path: "/home/mine",
        component: () => import("../views/home/mine/MineIndex.vue"),
        // 路由元信息,meta属性
        // 里面能写任何东西
        meta: {
          requireLogin: true,
          title: "我的猫眼",
        },
      },
    ],
  },
  {
    path: "/detail/:id",
    component: () => import("../views/detail/DetailIndex.vue"),
  },
  {
    path: "/city",
    component: () => import("../views/city/CityIndex.vue"),
    // 路由独享守卫
    // beforeEnter(to, from, next) {
    //   if (localStorage.getItem("token")) {
    //     next();
    //   } else {
    //     next("/login");
    //   }
    // },
  },
  {
    path: "/login",
    component: () => import("../views/login/LoginIndex.vue"),
  },
  // 404
  {
    path: "*",
    component: () => import("../views/notfound/NotFound.vue"),
  },
];

// 解决重复点击报错的问题
const originalPush = VueRouter.prototype.push;
// 重写了push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { x: 0, y: 0 };

    // 只有当前进或者后退的时候，会有保存的位置
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// 全局路由前置守卫
router.beforeEach((to, from, next) => {
  // console.log(to); // to表示要去的那个页面的路由信息
  // next(); // 相当于保安放行了
  // next(false); // 相当于不放行了
  // next("/login"); // 相当于重定向

  // 路由鉴权
  if (to.meta.requireLogin) {
    // 去的那个页面是需要登录的
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }

  // document.title = to.meta.title || "猫眼电影-娱乐看我的";
});

// 全局解析守卫，写法语法还是作用都跟前置守卫完全相同
// 唯一的区别是执行时机不同
// router.beforeResolve((to, form, next) => {});

// 全局后置钩子
router.afterEach((to) => {
  // ...
  document.title = to.meta.title || "猫眼电影-娱乐看我的";
});

export default router;
